<template>
    <page-layout>
        <a-card>
            <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-row :gutter="24">
                  <a-col :span="24">
                    <a-form-model-item label="下拉多选">
                        <z-multi-select-tag
                            v-model="form.selectValue"
                            :options="dictOptions1"
                            placeholder="请做出你的选择">
                        </z-multi-select-tag>
                    {{ form.selectValue }}
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="24">
                    <a-form-model-item label="checkbox">
                        <z-multi-select-tag
                            v-model="form.checkboxValue"
                            :options="dictOptions1"
                            type="checkbox">
                        </z-multi-select-tag>
                        {{ form.checkboxValue }}
                    </a-form-model-item>
                  </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="下拉搜索" >
                          <z-search-select-tag
                              placeholder="请做出你的选择"
                              v-model="form.selectValue"
                              dict="MB_SYSTEM_YES_NO">
                          </z-search-select-tag>
                          {{ form.selectValue }}
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="字典下拉" >
                        <z-dict-select-tag  v-model="form.sex" placeholder="请输入用户性别"  dictCode="MB_SYSTEM_YES_NO"/>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="字典下拉1" >
                          <z-dict-select-tag  v-model="form.sex" type="radio" placeholder="请输入用户性别"  dictCode="MB_SYSTEM_YES_NO"/>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="字典下拉2" >
                          <z-dict-select-tag  v-model="form.sex" type="radioButton" placeholder="请输入用户性别"  dictCode="MB_SYSTEM_YES_NO"/>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="用户选择" >
                        <ZSelectMultiUser v-model="form.user"/>
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="部门选择(多选)">
                      <ZSelectDept v-model="deptId" :tree-checkable="true" />
                      </a-form-model-item>
                    </a-col>
                    <a-col :span="24">
                      <a-row :gutter="24">
                        <a-col :span="12">
                          <a-form-item label="图片上传">
                            <z-image-upload v-model="imgList"></z-image-upload>
                          </a-form-item>
                        </a-col>
                        <a-col :span="12">选中的值(v-model)：{{ imgList }}</a-col>
                      </a-row>
                    </a-col>
                    <a-col :span="24">
                      <a-row :gutter="24" style="margin-top: 65px;margin-bottom:50px;">
                      <a-col :span="12">
                        <a-form-item label="文件上传">
                          <z-upload v-model="fileList"></z-upload>
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        选中的值(v-model)：
                        <z-ellipsis :value="fileList" :length="30" v-if="fileList.length>0"/>
                      </a-col>
                      </a-row>
                    </a-col>
                    <a-col :span="24">
                      <a-form-model-item label="ZModal弹窗">
                          <a-button style="margin-right: 8px;" @click="()=>modal.visible=true">点击弹出ZModal</a-button>
                          <span style="margin-right: 8px;">全屏化：<a-switch v-model="modal.fullscreen"/></span>
                          <span style="margin-right: 8px;">允许切换全屏：<a-switch v-model="modal.switchFullscreen"/></span>
                      </a-form-model-item>
                      <z-modal
                          :visible.sync="modal.visible"
                          :width="1200"
                          :title="modal.title"
                          :fullscreen.sync="modal.fullscreen"
                          :switchFullscreen="modal.switchFullscreen"
                      >
                          <template v-for="(i,k) of 30">
                              <p :key="k">这是主体内容，高度是自适应的</p>
                          </template>
                      </z-modal>
                    </a-col>
                    <!-- <a-row :gutter="24"> -->
                      <a-col :span="12">
                        <a-form-item label="日期选择">
                           <a-date-picker v-model="date1" />
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">选中的值(v-model)：{{ date1 }}</a-col>
                    </a-row>
                    <a-row :gutter="24">
                      <a-col :span="12">
                        <a-form-item label="用户选择">
                           <ZSelectUserByDep :multi="false" v-model="form.userdept" />
                        </a-form-item>
                      </a-col>
                      <a-col :span="12">
                        选中的值(v-model)：{{ form.userdept }}
                      </a-col>
                    <!-- </a-row> -->

                </a-row>
            </a-form-model >
        </a-card>
    </page-layout>
</template>

<script>
import PageLayout from '@/layouts/PageLayout'
import ZDictSelectTag from '@/components/dict/ZDictSelectTag.vue'
import ZMultiSelectTag from '@/components/dict/ZMultiSelectTag'
import ZSearchSelectTag from '@/components/dict/ZSearchSelectTag'
import ZSelectMultiUser from '@/components/zzbiz/ZSelectMultiUser'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import Criteria from '@/utils/criteria'
import Crud from '@/utils/crud'
import { OPERATOR } from '@/store/mutation-types'
import ZImageUpload from '@/components/zz/ZImageUpload'
import ZUpload from '@/components/zz/ZUpload'
import ZSelectDept from '@/components/zzbiz/ZSelectDept'
export default {
  components: {
    ZDictSelectTag,
    ZMultiSelectTag,
    ZSearchSelectTag,
    ZSelectMultiUser,
    PageLayout,
    ZImageUpload,
    ZUpload,
    ZSelectDept,
    ZSelectUserByDep
  },
  data() {
    return {
      form: {
        user: 'admin',
        userdept: 'admin3,admin'
      },
      imgList: [],
      fileList: [],
      dictOptions1: [
        { itemValue: '1', itemText: '男' },
        { itemValue: '2', itemText: '女' }
      ],
      modal: {
        title: '这里是标题',
        visible: false,
        fullscreen: true,
        switchFullscreen: true
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      date1: '2022-05-01',
      deptId: ['19']
    }
  },
  mounted() {
    // 查询构造器
    // 使用方法一
    const param = new Criteria()
    param.addCriterion('resourceType', OPERATOR.EQ, 'ELEMENT')
      .or()
      .addCriterion('username', OPERATOR.EQ, 'admin')
      .addCriterion('username', OPERATOR.EQ, 'admin1')
      .and()
      .addCriterion('age', OPERATOR.GT, 18)
      .addCriterion('score', OPERATOR.EQ, 60)
      .end()
      .end()
      .addOrder('createTime', true)
      .addOrder('updateTime', true)
    console.log(param)
    const aaa = ['admin', 'admin2', 'admin3']
    const ccc = new Criteria()
    aaa.forEach((item, i) => {
      if (i === 0) {
        ccc.or().addCriterion('user', OPERATOR.EQ, item)
      } else {
        ccc.addCriterion('user', OPERATOR.EQ, item)
      }
    })
    ccc.end()
    console.log(ccc)
    // 使用方法二
    const form = {
      username: 'admin',
      sex: '17'
    }
    const b = new Criteria()
    b.addCriterions(form, OPERATOR.LIKE)
    // console.log(b)
    const data1 = [
      { id: 1, b: '1.1', list: [{ id: '1-2', d: 1, list: [1, 2, 3] }, { id: '1-1', d: 1 }] },
      { id: 2, b: 2, list: [{ id: '2-2', d: 2 }] },
      { id: 3, b: 3, list: [{ id: '4-2', d: 6 }] }
    ]

    const data2 = [
      { id: 1, b: 1, list: [{ id: '1-2', d: 1, list: [1, 2, 3] }] },
      { id: 2, b: 2, list: [{ id: '2-2', d: 2 }] },
      { id: 3, b: 3, list: [{ id: '3-2', d: 3 }] },
      { id: 4, b: 4, list: [{ id: '4-2', d: 6 }] }
    ]
    // const formData = new Crud(data2)
    // const aaa = formData.getCrudType(data1)
    // console.log(aaa)
    // const obj1 = { id: 1, b: '1.1', list: [{ id: '1-2', d: 1, list: [1, 2, 3] }, { id: '1-1', d: 1 }] }
    // const obj2 = { id: 1, b: 1, list: [{ id: '1-2', d: 1, list: [1, 2, 3] }] }
    // const formData = new Crud(obj2)
    // const bbb = formData.getCrudType(obj1)
    // console.log(bbb)
    const obj1 = { id: 1, b: '1.1', list: { id: '1-1', d: 1, list: [1, 2] }}
    const obj2 = { id: 1, b: 1, list: { id: '1-2', d: 1, list: [1, 2, 3] }}
    const formData = new Crud(obj2)
    const bbb = formData.getCrudType(obj1)
    console.log(bbb)
  }
}
</script>

<style>

</style>
